import React from 'react';
import {App,Button, DatePicker, Form, Input, InputNumber, Select} from "antd";
import {useNavigate} from "react-router-dom";
import LogFactory from "log/LogFactory";
import {Consume} from "type/Consume";
import TextArea from "antd/es/input/TextArea";
import dayjs from "dayjs";
import {MATHEMATICAL_PRECISION} from "constant/Common";
import {useAppDispatch, useAppSelector} from "../../../redux/hook";
import {fetchAddConsume, fetchLoadItemOptions} from "../../../redux/reducer/async/consumeAsyncAction";
import DrawerEnhance from "common/drawer/DrawerEnhance";

const log = LogFactory.getLog("ConsumeAddComponent");
const ConsumeAddComponent = () => {
    const dispatch = useAppDispatch();
    const state = useAppSelector(state => state.consume) ;
   const [loading, setLoading] = React.useState(false) ;
    const [form] = Form.useForm<Consume>();
    const { message } = App.useApp() ;
    const navigate = useNavigate() ;
    const afterOpenChange = async () => {
        if (state.itemOptions === void 0){
            dispatch(fetchLoadItemOptions()) ;
        }
    } ;

    const onFinish = async (values: Consume) => {
        values.consumeDate = values.consumeDate.format("YYYY-MM-DD");
        values.money = values.money * MATHEMATICAL_PRECISION ;
        // log.debug("添加消费记录: " , values);
        const res = await dispatch(fetchAddConsume(values)).unwrap() ;
        if (res.success){
            // log.debug("添加消费记录成功");
            message.success("添加消费记录成功");
            navigate("..", {replace: true}) ;
            return ;
        }
        message.error("添加消费记录失败");
    } ;
    const initialValues: Partial<Consume> = {
        money: 0.00,
        consumeDate: dayjs(new Date()),
        // item: "吃饭"
    } ;
    return (
        <DrawerEnhance
            title={"添加消费记录"}
            afterOpenChange={afterOpenChange}
        >
            <Form<Consume>
                layout="vertical"
                form={form}
                onFinish={onFinish}
                initialValues={initialValues}
            >
                <Form.Item<Consume> label="消费项目" name={"item"} rules={[{required: true, message: '消费项目必须选择一个'}]}>
                    <Select
                        placeholder={"请选择项目"}
                        options={state.itemOptions}
                    >
                    </Select>
                </Form.Item>

                <Form.Item<Consume> name={"money"} label="消费金额"
                                                 rules={[{required: true, message: '消费金额不能为空'}]}>
                    <InputNumber min={0.00} precision={2} addonBefore={"¥"}/>
                </Form.Item>
                <Form.Item<Consume> name={"consumeDate"} label="消费时间"
                                    rules={[{required: true, message: '消费时间不能为空'}]}>
                    <DatePicker format={"YYYY-MM-DD"}/>
                </Form.Item>
                <Form.Item<Consume> label="消费说明" name={"explain"}>
                    <Input/>
                </Form.Item>
                <Form.Item<Consume> label="备注信息" name={"remark"}>
                    <TextArea rows={2}/>
                </Form.Item>
                <Form.Item>
                        <Button loading={loading} type="primary" htmlType="submit">
                            添加
                        </Button>
                </Form.Item>
            </Form>

        </DrawerEnhance>
    );
};

export default ConsumeAddComponent;